<template>
	<view class="item" @tap="check">
		<view class="avatar_bg" :class="'lv' + info.lv">
			<u-image width="110" height="110" :src="info.avatar" border-radius="60"></u-image>
		</view>
		<view class="right">
			<view class="top">
				<text class="name">{{ info.nickname }}</text>
				<view class="like" v-if="info.iLike" @tap.stop="updateLike(0)">
					<u-icon name="heart-fill" size="44" color="#ff8f1e"></u-icon>
					<text style="margin-left: 6rpx">{{ info.like }}</text>
				</view>
				<view class="like no" v-else @tap.stop="updateLike(1)">
					<u-icon name="heart-fill" size="44" color="#999"></u-icon>
					<text style="margin-left: 6rpx">{{ info.like }}</text>
				</view>
			</view>
			<view class="middle">
				<view class="time">最近可约: {{ near }}</view>
				<view class="area">
					<u-icon name="map" size="26" color="#FF8F1E"></u-icon>
					<text>{{ info.distance }} km</text>
				</view>
			</view>
			<view class="end">
				<text>已服务: {{ info.order }}单</text>
				<view class="btn">立即预约</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: "shifu-item",
	props: { info: Object, sid: String },
	data() {
		return {
			flag: true
		}
	},
	computed: {
		near() {
			const { shifu_time, agent_time } = this.info
			let now = vk.pubfn.timeFormat(new Date(), "hh:mm")
			for (let i = 0; i < agent_time.length; i++) {
				let t = agent_time[i]
				if (t > now && shifu_time.indexOf(t) === -1) return t
			}
			return "暂无"
		}
	},
	methods: {
		check() {
			if (this.sid) {
				vk.redirectTo(`/pages/project/order-create?sid=${this.info._id}&pid=${this.sid}`)
			} else {
				vk.navigateTo(`/pages/shifu/detail?id=${this.info._id}`)
			}
		},
		// 收藏
		async updateLike(type) {
			if (!this.flag) return
			this.flag = false
			let login = vk.checkToken()
			if (!login) {
				this.flag = true
				return vk.toast("请先前往登录", "none", 1000, () => {
					vk.navigateTo("/pages/login/login")
				})
			}
			if (type == 1) {
				this.info.like++
				this.info.iLike = 1
			} else {
				this.info.like--
				this.info.iLike = null
			}
			this.$emit("updateLike")
			await vk.callFunction({
				url: "client/user.updateShifuLike",
				data: { _id: this.info._id, agent: this.info.agent }
			})
			this.flag = true
		}
	}
}
</script>

<style lang="scss" scoped>
.item {
	margin: 4rpx 20rpx 20rpx;
	background: #ffffff;
	border-radius: 12rpx;
	padding: 24rpx 20rpx 24rpx 10rpx;
	display: flex;
}

.avatar_bg {
	width: 150rpx;
	height: 150rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: -6rpx 0 0 -6rpx;
}
.lv1 {
	background: url("https://mp-d0bdc000-db91-44a8-852b-e6f607a7ca19.cdn.bspapp.com/cloudstorage/c188cc21-52c7-43ce-8d5b-8abc6ebd3853.png") no-repeat center;
	background-size: 100% 100%;
}
.lv2 {
	background: url("https://mp-d0bdc000-db91-44a8-852b-e6f607a7ca19.cdn.bspapp.com/cloudstorage/b5e05181-27a9-4778-9ffc-6399b42018d0.png") no-repeat center;
	background-size: 100% 100%;
}
.lv3 {
	background: url("https://mp-d0bdc000-db91-44a8-852b-e6f607a7ca19.cdn.bspapp.com/cloudstorage/fbd0a8d3-6495-424f-baf3-e1a93c4f1a2b.png") no-repeat center;
	background-size: 100% 100%;
}
.lv4 {
	background: url("https://mp-d0bdc000-db91-44a8-852b-e6f607a7ca19.cdn.bspapp.com/cloudstorage/76f661bf-1524-4566-8d56-250936e06bcb.png") no-repeat center;
	background-size: 100% 100%;
}
.lv5 {
	background: url("https://mp-d0bdc000-db91-44a8-852b-e6f607a7ca19.cdn.bspapp.com/cloudstorage/633d5498-3ca0-428d-b676-375cd08d2e13.png") no-repeat center;
	background-size: 100% 100%;
}

.right {
	padding-left: 4rpx;
	flex: 1;
	.top {
		display: flex;
		align-items: center;
		flex: 1;
		.name {
			font-size: 32rpx;
			color: #333333;
			flex: 1;
			font-weight: bold;
		}
		.like {
			font-size: 24rpx;
			color: #ff8f1e;
			display: flex;
			align-items: center;
		}
		.no {
			color: #999999;
		}
	}
	.middle {
		display: flex;
		padding: 30rpx 0 8rpx;
		.time {
			border-radius: 6rpx;
			border: 1rpx solid #3ab54a;
			font-size: 22rpx;
			color: #3ab54a;
			padding: 2rpx 8rpx;
		}
		.area {
			border-radius: 6rpx;
			border: 1rpx solid #ff8f1e;
			font-size: 22rpx;
			color: #ff8f1e;
			padding: 2rpx 8rpx 2rpx 2rpx;
			margin-left: 16rpx;
		}
	}
	.end {
		font-size: 26rpx;
		color: #999999;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.btn {
			height: 54rpx;
			background: #3ab54a;
			border-radius: 27rpx;
			color: #ffffff;
			padding: 0 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 28rpx;
		}
	}
}
</style>
